<template>
  <div class="filterUser">
    <p class="userText">受众用户为满足以下条件的用户（非必选）</p>
    <p class="userTextInfo">若下列条件不添加，则受众用户默认为全部注册用户</p>
    <div class="filterUserContent rowFlex">
      <div class="columnFlex flex1 filterItem">
        <div class="filterItemTitle  rowFlex spaceBetween"><span>用户属性满足</span>   <div class="addItem rowFlex columnCenter" @click="addFilteritem('property')"> <i class="el-icon-circle-plus addIcon"></i> 添加</div></div>
        <div class="filterItemContent rowFlex columnCenter">
          <div v-if="ruleForm.member_attribute && ruleForm.member_attribute.condition && ruleForm.member_attribute.condition.length>1" class="huoLeft" style="height:100%;">
            <div class="and_or" @click="ruleForm.member_attribute.operation == 1 ?ruleForm.member_attribute.operation=2:ruleForm.member_attribute.operation=1">{{ ruleForm.member_attribute.operation == 1 ? '且' : '或' }}</div>
          </div>
          <div class="allItem">
            <div v-for="(user,index) in ruleForm.member_attribute.condition" :key="index" class="filterConditions  rowFlex columnCenter spaceBetween">
              <div class="filterConditionsItem rowFlex columnCenter">
                <el-select v-model="user.type" style="width:100px;margin-right:10px;" :clearable="false" placeholder="请选择" @change="typeChange(user,index)">
                  <el-option
                    v-for="item in selectOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
                <!-- 支付状态 -->
                <el-select v-if="user.type=='pay_status'" v-model="user.mode" style="width:120px;margin-right:10px;" :clearable="false" placeholder="请选择">
                  <el-option
                    v-for="item in payStatusList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
                <!-- 充值类型 -->
                <el-select v-if="user.type=='recharge_type'" v-model="user.mode" style="width:120px;margin-right:10px;" :clearable="false" placeholder="请选择">
                  <el-option
                    v-for="item in rechargeTypeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
                <!-- 注册时间 -->
                <div v-if="user.type=='reg_time'" class="rowFlex columnCenter">
                  <el-select v-model="user.mode" style="width:100px;margin-right:10px;" :clearable="false" placeholder="请选择">
                    <el-option
                      v-for="item in positionTimeList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                  <div v-if="user.mode==2">
                    <DateSelect label=" " :default-value="user.start.length>5?[user.start,user.end]:[]" @result="resultDate(user,index,$event)" />
                  </div>
                  <div v-else>
                    <span>过去</span>
                    <el-input-number v-model="user.start" :min="0" controls-position="right" style="margin:0 5px;width:95px;" @input.native="numChange($event)"></el-input-number>
                    <span>—</span>
                    <el-input-number v-model="user.end" :min="0" controls-position="right" style="margin:0 5px;width:100px;" @input.native="numChange($event)"></el-input-number>
                    <el-select v-model="user.unit" style="width:60px;margin:0 5px 0 0 ;" :clearable="false" placeholder="请选择">
                      <el-option
                        v-for="item in unitList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                    <el-select v-model="user.range" style="width:80px;margin:0 10px 0 0;" :clearable="false" placeholder="请选择">
                      <el-option
                        v-for="item in rangeList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </div>
                </div>
              </div>
              <div v-if="ruleForm.member_attribute.condition && ruleForm.member_attribute.condition.length>0" class="removeItem" @click="removeItem(index,'property')"> <i class="el-icon-close"></i> </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import DateSelect from '@/common/component/form/dateSelect.vue'
export default {
  components: {
    DateSelect
  },
  props: {
    ruleForm: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      // 用户属性
      positionTime: 1,
      selectOption: [
        { label: '注册时间', value: 'reg_time' },
        { label: '充值类型', value: 'recharge_type' },
        { label: '支付状态', value: 'pay_status' }
      ],
      payStatusList: [
        { label: '未支付', value: 0 },
        { label: '已支付', value: 1 }
      ],
      rechargeTypeList: [
        { label: '充值喵币', value: 1 },
        { label: '充值会员', value: 2 },
        { label: '解锁本剧全集', value: 3 }
      ],
      positionTimeList: [
        { label: '相对时间', value: 1 },
        { label: '绝对时间', value: 2 }
      ],
      unitList: [
        { label: '时', value: 1 },
        { label: '天', value: 2 }
      ],
      rangeList: [
        { label: '之内', value: 1 },
        { label: '之外', value: 2 }
      ],
      // 用户行为
      actionOption: [
        { label: '取消支付', value: 'cancel_pay' },
        { label: '关闭充值模版', value: 'close_template' }
      ],
      allNumList: [
        { label: '总次数', value: 1 }
      ],
      actionNum: 1,
      operationList: [
        { label: '小于等于', value: 1 },
        { label: '大于等于', value: 2 }
      ]

    }
  },
  methods: {
    typeChange(user, index) {
      this.$set(this.ruleForm.member_attribute.condition[index], 'mode', 1)
      this.$forceUpdate()
    },
    resultDate(user, index, value) {
      this.$set(this.ruleForm.member_attribute.condition[index], 'start', value.start_date)
      this.$set(this.ruleForm.member_attribute.condition[index], 'end', value.end_date)
    },
    numChange(e) {
      e.target.value = e.target.value.replace(/[^\d]/g, '')
    },
    addFilteritem(type) {
      if (type == 'property') {
        this.ruleForm.member_attribute.condition.push(
          {
            type: 'reg_time',
            time_type: 1,
            start: 0,
            end: 0,
            unit: 1,
            status: 1,
            mode: 1,
            range: 1
          }
        )
      }
    },
    removeItem(index, type) {
      if (type == 'action') {
        this.ruleForm.member_action.condition.splice(index, 1)
      } else {
        this.ruleForm.member_attribute.condition.splice(index, 1)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.filterUser {
  width: 100%;
  margin-bottom: 20px;
  .userText {
    font-size: 16px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    color: #1d2129;
  }
  .userTextInfo {
    font-size: 13px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #86909c;
    line-height: 18px;
  }
  .filterUserContent {
    width: 100%;
    padding-top: 10px;
    .filterItem{
      background: #f7f8fa;
      padding: 20px;
      margin-top: 10px;
    }
      .filterItemTitle{
        font-size: 14px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        color: #1D2129;
        margin-bottom: 12px;
      }
      .addItem{
        font-size: 14px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #1D2129;
        cursor: pointer;
        user-select: none;
      }
    .allItem{
        width: 100%;
    }
    .filterConditions{
        margin-top: 10px;
        width: 100%;
        .filterConditionsItem{

        }
      }
  }
  .filterItemContent{
    width: 100%;
    // height: calc(100% - 72px);
  }
  .addIcon{
    color:#00BF8A;
    font-size:20px;
    margin-right:5px;
    cursor: pointer;
  }
  .removeItem{
    color: #86909C;
    font-size:20px;
    font-weight: bolder;
    cursor: pointer;
  }
  .demo{
    height: inherit;
    width: 20px;
    background: red;
  }

   .huoLeft {
      position: relative;
      width: 1px;
      width: 15px;
      border-right: 2px solid rgba($color: #00BF8A, $alpha: 0.2);
      margin: 10px 20px 10px 0;
      .and_or {
        position: absolute;
        top: 50%;
        left: 5px;
        transform: translateY(-10px);
        color: #00BF8A;
        font-weight: 500;
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 18px;
        background: #eaf7f3;
        border-radius: 4px;
        cursor: pointer;
        user-select: none;
      }
    }
    .huoLeft::before {
      content: ' ';
      display: block;
      width: 15px;
      height: 1px;
      background: rgba($color: #00BF8A, $alpha: 0.5);
      position: absolute;
      left: 7px;
    }
    .huoLeft::after {
      content: ' ';
      display: block;
      width: 15px;
      height: 1px;
      background: rgba($color: #00BF8A, $alpha: 0.5);
      position: absolute;
      left: 7px;
      bottom: 0;
    }
    .actionInfo{
      font-size: 13px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #86909C;
    }
}
</style>
